<template>
  <!-- <view></view> -->
  <!-- <text></text> -->
  <view class="layout">
    <view class="layout-top">
      <view class="title">
        <text>命理古籍</text>
        <text class="dot"></text>
        <text>知晓整理</text>
      </view>
      <view class="big-box" @click="toPage">
        <image src="/static/big.svg" mode="widthFix"></image>
        <text>放大</text>
      </view>
    </view>
    <view class="nav-wrap">
      <view @click="bindNav1(index)" :class="{ active1: activeIndex == index }" v-for="(item, index) in navList1" :key="index">{{ item.title }}</view>
    </view>
    <view class="content-wrap">
      <view class="f-nav">
        <view @click="bindNav2(index)" :class="{ active2: activeIndex2 == index }" v-for="(item, index) in navList2" :key="index">{{ item.title }}</view>
      </view>
      <view class="t-nav">
        <view @click="bindNav3(index)" v-for="(item, index) in navList3" :class="{ active3: activeIndex3 == index }" :key="index">{{ item.title }}</view>
      </view>

      <view class="r-text">
        <textarea class="textarea" style="height: 1900rpx; width: auto" v-model="navContent"></textarea>
      </view>

<!--      <view class="r-text">-->
<!--      <view class="uni-textarea">-->
<!--        <textarea >{{ navContent }}</textarea>-->
<!--      </view>-->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
      activeIndex2: 0,
      activeIndex3: 0,
      text1: '',
      text2: '',
      text3: '',
      text4: '',
      navList1: [],
      navList2: [],
      navList3: '',
      navContent: '',
      form: {}
    };
  },
  onLoad() {
    this.initList();

  },
  methods: {

    initList() {
      uni.showLoading({
        title: '加载中'
      })

      uni.request({
        url: 'https://zhixiaoyixue.com:86/menu/menu01', //仅为示例，并非真实接口地址。
        data: {},
        header: {
          'Access-Control-Allow-Origin': '*' //自定义请求头信息
        },
        success: (res) => {
          this.navList1 = res.data.navList1
          this.navList2 = this.navList1[this.activeIndex].children
          this.navList3 = this.navList2[this.activeIndex2].children
          this.text1 = this.navList1[0].title;
          this.text2 = this.navList2[0].title;
          this.text3 = this.navList2[0].children[0].title;
          this.text4 = this.navList2[0].children[0].content;
          console.log(this.text1);
          this.navList3 = this.navList2[0].children;
          this.navContent = this.navList2[0].children[0].content;
          uni.hideLoading()
        }
      });

    },
    toPage() {
      uni.setStorageSync('text1', this.text1)
      uni.setStorageSync('text2', this.text2)
      uni.setStorageSync('text3', this.text3)
      uni.setStorageSync('text4', this.text4)
      uni.navigateTo({
        url: '/pages/component/dzs/detail'
      })
    },
    bindNav1(index) {
      this.activeIndex = index;
      if (index == 1) {
        this.navList2 = this.navList1[this.activeIndex].children
      } else {
        this.navList2 = this.navList1[this.activeIndex].children
      }
      console.log("list2=" + this.navList2[0])
      this.navList3 = this.navList2[0].children;
      this.activeIndex2 = 0;
      this.activeIndex3 = 0;
      this.navContent = this.navList2[this.activeIndex2].children[0].content;
      this.text1 = this.navList1[index].title;
      this.text2 = this.navList2[0].title;
      this.text3 = this.navList2[0].children[0].title;
      this.text4 = this.navList2[0].children[0].content;
      console.log(this.text1);
    },
    bindNav2(index) {
      this.navList2 = this.navList1[this.activeIndex].children
      this.text2 = this.navList2[index].title;
      this.text3 = this.navList2[index].children[0].title;
      this.text4 = this.navList2[index].children[0].content;
      console.log(this.text1);
      this.activeIndex2 = index;
      this.navList3 = this.navList2[index].children;
      this.activeIndex3 = 0;
      this.navContent = this.navList2[index].children[0].content;
    },
    bindNav3(index) {
      this.navList2 = this.navList1[this.activeIndex].children
      this.text3 = this.navList2[this.activeIndex2].children[index].title;
      this.text4 = this.navList2[this.activeIndex2].children[index].content;
      console.log(this.text1, this.text2, this.text3);
      // this.text3 =this.navList2[this.activeIndex2].children[index].title
      // console.log(this.text3,'text333')
      this.activeIndex3 = index;
      this.navContent = this.navList2[this.activeIndex2].children[index].content;
    }
  }
};
</script>

<style lang="less">
.layout {
  .layout-top {
    position: relative;
    top: 50rpx;
    height: 50rpx;

    .title {
      font-size: 32rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;

      .dot {
        width: 6rpx;
        height: 6rpx;
        border-radius: 50%;
        background-color: #000;
        display: inline-block;
        margin: 0 15rpx;
      }
    }

    .big-box {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      position: absolute;
      right: 40rpx;
      top: 4rpx;

      image {
        width: 36rpx;
        margin-right: 6rpx;
      }
    }
  }

  .nav-wrap {
    display: flex;
    padding-top: 80rpx;
    overflow-x: auto;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    > view {
      font-size: 28rpx;
      white-space: nowrap;
      margin: 0 20rpx;
    }

    .active1 {
      color: #018dc5;
      border-bottom: 4rpx solid #018dc5;
      padding-bottom: 6rpx;
    }
  }

  .content-wrap {
    display: flex;
    margin-top: 20rpx;
    height: calc(100vh - 200rpx);
    font-size: 28rpx;

    .f-nav {
      background-color: #f4f5f9;
      // border:1px solid red;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      > view {
        padding: 20rpx;
        text-align: center;
        // border:1px solid red;
      }

      .active2 {
        background: #0080ff;
        color: #fff;
      }
    }

    .t-nav {
      background-color: #f8f7f3;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      > view {
        padding: 20rpx;
        text-align: center;
        // border:1px solid red;
      }

      .active3 {
        background: #f4c251;
        color: #fff;
      }
    }

    .r-text {
      white-space: normal;
      padding-top: 10rpx;
      padding-left: 10rpx;
      overflow-y: auto;
      flex: 1;
      // width: 52%;
      // border:1px solid red;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }
}
</style>